import { Select, AutoComplete } from 'antd'
import querystring from 'querystring'
import React from 'react'
import PropTypes from 'prop-types'
import { request } from 'utils'
import lodash from 'lodash'

const Option = Select.Option

class SearchInput extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      data: [],
      value: '',
    }
  }

  // componentDidMount () {
  //   this.fetch()
  // }
  //

  componentWillReceiveProps (nextProps) {
    // const staticNextProps = lodash.cloneDeep(nextProps)
    // delete staticNextProps.columns
    // const { columns, ...otherProps } = this.props
    //
    // if (!lodash.isEqual(staticNextProps, otherProps)) {
    if ('value' in nextProps) {
      const value = nextProps.value
      this.setState(value)
    }
    // }
  }
  fetch = (value) => {
    const { url, searchKey } = this.props
    this.promise = request({
      url,
      method: 'post',
      data: {
        ...searchKey,
        name: value,
      },
    }).then((result) => {
      this.setState({
        data: result.data,
      })
    })
  }

  handleChange = (value) => {
    this.setState({ value })
    this.fetch(value)
  }
  render () {
    const options = this.state.data.map(d => <Option key={d.code}>{d.name}</Option>)
    return (
      <Select
        mode="combobox"
        value={this.state.value}
        placeholder={this.props.placeholder}
        defaultActiveFirstOption={false}
        showArrow={false}
        filterOption={false}
        onChange={this.handleChange}
        onSelect={this.props.onSelect}
      >
        {options}
      </Select>
    )
  }
}

// class SearchInput extends React.Component {
//   constructor (props) {
//     super(props)
//     this.state = {
//       dataSource: [],
//       data: [],
//     }
//     this.timeout=0
//     this.currentValue = ''
//   }
//   // componentDidMount () {
//   //   this.fetch()
//   // }
//   //
//   // componentWillReceiveProps (nextProps) {
//   //   // const staticNextProps = lodash.cloneDeep(nextProps)
//   //   // delete staticNextProps.columns
//   //   // const { columns, ...otherProps } = this.props
//   //   //
//   //   // if (!lodash.isEqual(staticNextProps, otherProps)) {
//   //   this.props = nextProps
//   //   this.fetch()
//   //   // }
//   // }
//   fetch = () => {
//     const { url, searchKey } = this.props
//     let tmpData=[]
//     this.promise = request({
//       url,
//       method: 'post',
//       data: {
//         ...searchKey,
//         name: this.state.value,
//       },
//     }).then((result) => {
//       result.data.forEach((e) => {
//         tmpData.push({ key: e.code, value: e.name })
//       })
//       console.log(tmpData)
//       this.setState({
//         dataSource: tmpData,
//       })
//     })
//   }
//
//   handleSearch = () => {
//     this.fetch()
//   }
//
//   render () {
//     const { dataSource } = this.state;
//     return (
//       <AutoComplete
//         dataSource={dataSource}
//         style={{ width: 200 }}
//         onSelect={onSelect}
//         onSearch={this.handleSearch}
//         placeholder="input here"
//       />
//     );
//   }
// }

SearchInput.propTypes = {
  placeholder: PropTypes.string,
  url: PropTypes.string,
  searchKey: PropTypes.object,
  onSelect: PropTypes.func,
}

export default SearchInput
